<template>
  <div class="Home">
    <Navtop></Navtop>
    <Navtwo></Navtwo>
    <header>
      <div class="banner">
        <img :src="bannerList[0] && bannerList[0].s_photos[0].path" alt="" />
        <div class="banner_title">
          <h2>S12系列</h2>
        </div>
        <div class="banner_text">
          <p>先锋摄影旗舰</p>
          <p>全面出色，自然出众</p>
        </div>
        <div class="banner_button">
          <div class="button">
            <span>了解更多</span>
            <div class="btn">></div>
          </div>
          <div class="button">
            <span>立即购买</span>
            <div class="btn">></div>
          </div>
        </div>
      </div>
    </header>
    <main>
      <div class="Img_box">
        <div class="demo-image__lazy">
          <el-image
            v-for="url in urls"
            :key="url.id"
            :src="url"
            lazy
            class="box"
          ></el-image>
        </div>

        <div class="text_box1">
          <div class="text_title">
            <h2>VIVO WATCH 2</h2>
          </div>

          <div class="text">
            <p>独立通信 强劲续航</p>
          </div>

          <div class="button_box">
            <div class="button">
              <span>了解更多</span>
              <div class="btn">></div>
            </div>
            <div class="button">
              <span>立即购买</span>
              <div class="btn">></div>
            </div>
          </div>
        </div>
        <div class="text_box2">
          <div class="text_title">
            <h2>X70系列</h2>
          </div>

          <div class="text">
            <p>蔡司影像，品阅时光</p>
          </div>

          <div class="button_box">
            <div class="button">
              <span>了解更多</span>
              <div class="btn">></div>
            </div>
            <div class="button">
              <span>立即购买</span>
              <div class="btn">></div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <footer>
      <div class="discover">
        <div class="discover_title">
          <p>发现更多</p>
        </div>

        <div class="flex_img">
          <div class="img_box1">
            <div class="box1">
              <div class="imgbox">
                <img
                  :src="bannerList[3] && bannerList[3].s_photos[0].path"
                  alt=""
                />
              </div>
              <div class="text">
                <p>S10e</p>
                <p>自然人像，自在畅快</p>
              </div>
            </div>
            <div class="box2">
              <div class="imgbox">
                <img
                  :src="bannerList[4] && bannerList[4].s_photos[0].path"
                  alt=""
                />
              </div>
              <div class="text">
                <p>vivo Y55s</p>
                <p>6000 mAh金标巨能量电池</p>
                <p>200%澎湃音量</p>
              </div>
            </div>
          </div>
          <div class="img_box2">
            <div class="imgbox">
              <img
                :src="bannerList[5] && bannerList[5].s_photos[0].path"
                alt=""
              />
            </div>

            <div class="text">
              <p>IQOO 9 系列</p>
              <p>1月5日新品发布会</p>
            </div>
          </div>
          <div class="img_box3">
            <div class="box1">
              <div class="imgbox">
                <img
                  :src="bannerList[6] && bannerList[6].s_photos[0].path"
                  alt=""
                />
              </div>

              <div class="text">
                <p>IQOO Neo5S</p>
                <p>独显芯片Pro | 高通骁龙888</p>
              </div>
            </div>
            <div class="box2">
              <div class="imgbox">
                <img
                  :src="bannerList[7] && bannerList[7].s_photos[0].path"
                  alt=""
                />
              </div>
              <div class="text">
                <p>T系列</p>
                <p>全芯高能，带劲上场</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <BottomList></BottomList>
  </div>
</template>

<script>
import Navtop from "../components/navtop";
import Navtwo from "../components/navTwo.vue";
import BottomList from "../components/bottomList.vue";
import { getBanner } from "../api/test.js";
export default {
  components: {
    BottomList,
    Navtwo,
    Navtop,
  },
  name: "Index",
  data() {
    return {
      urls: [],
      bannerList: [],
    };
  },

  methods: {
    aaa() {
      console.log(123);
    },
    bbb($el) {
      console.log($el);
    },
  },

  created() {
    getBanner({
      site_id: 121,
      project_id: 149,
    }).then((res) => {
      this.bannerList = res.data.result;
      this.urls.push(res.data.result[1].s_photos[0].path);
      this.urls.push(res.data.result[2].s_photos[0].path);
      // console.log(res);
    });
  },
};
</script>

<style lang="scss" scoped>
* {
  img {
    width: 100%;
    display: block;
  }
}
.Home {
  header {
    .banner {
      position: relative;
      margin-top: -80px;
      // height: 885px;
      .banner_title {
        position: absolute;
        top: 0;
        font-size: 50px;
        padding-top: 275px;
        padding-left: 230px;
      }

      .banner_text {
        top: 360px;
        position: absolute;
        margin-top: 10px;
        line-height: 50px;
        padding-left: 230px;
        font-size: 30px;
        font-weight: 400;
        letter-spacing: 3px;
      }

      .banner_button {
        position: absolute;
        top: 460px;
        margin-top: 70px;
        padding-left: 210px;
        display: flex;
        cursor: pointer;
        .button {
          background-color: transparent;
          font-size: 25px;
          display: flex;
          margin: 0 20px;
          align-items: center;
          .btn {
            margin-left: 10px;
            width: 40px;
            font-size: 20px;
            border: 2px solid #000;
            border-radius: 50px;
            text-align: center;
            transition: all 0.5s;
          }
        }
        .button:hover {
          color: blue;
          transition: all 0.5s;
          .btn {
            border-color: blue;
            transform: scaleX(1.1) translateX(10px);
          }
        }
      }
    }
  }

  main {
    margin-top: 80px;
    padding: 0 5%;
    .Img_box {
      position: relative;
      .demo-image__lazy {
        z-index: 888;
        width: 100%;
        // height: 1310px;
        overflow: hidden;
        border-radius: 30px;
        :hover {
          transform: scale(1.1, 1.1);
        }
        .el-image {
          z-index: 888;
          display: block;
          overflow: hidden;
          margin-bottom: 30px;
          transition: all 1.5s;
        }
      }

      .text_box1 {
        z-index: 888;
        position: absolute;
        top: 230px;
        left: 150px;
        .text_title {
          font-size: 30px;
          letter-spacing: 5px;
        }

        .text {
          font-size: 30px;
          line-height: 60px;
          text-align: left;
        }

        .button_box {
          display: flex;
          margin-top: 50px;
          // padding-left: 230px;
          .button {
            background-color: transparent;
            font-size: 25px;
            display: flex;
            margin-right: 20px;
            align-items: center;
            .btn {
              margin-left: 10px;
              width: 40px;
              font-size: 20px;
              border: 2px solid #000;
              border-radius: 50px;
              text-align: center;
              transition: all 0.5s;
            }
          }
          .button:hover {
            color: blue;
            transition: all 0.5s;
            .btn {
              border-color: blue;
              transform: scaleX(1.1) translateX(10px);
            }
          }
        }
      }
      .text_box2 {
        z-index: 888;
        position: absolute;
        top: 750px;
        left: 150px;
        color: #fff;
        text-align: left;
        .text_title {
          font-size: 40px;
          letter-spacing: 5px;
        }

        .text {
          font-size: 30px;
          line-height: 60px;
        }

        .button_box {
          display: flex;
          margin-top: 50px;
          // padding-left: 230px;
          .button {
            background-color: transparent;
            font-size: 25px;
            display: flex;
            margin-right: 20px;
            align-items: center;
            .btn {
              margin-left: 10px;
              width: 40px;
              font-size: 20px;
              border: 2px solid #fff;
              border-radius: 50px;
              text-align: center;
              transition: all 0.5s;
            }
          }
          .button:hover {
            color: blue;
            transition: all 0.5s;
            .btn {
              border-color: blue;
              transform: scaleX(1.1) translateX(10px);
            }
          }
        }
      }
    }
  }

  footer {
    margin-top: 50px;
    background-color: #f0f2f5;
    padding: 0 5%;
    padding-bottom: 40px;

    .discover {
      padding-top: 80px;
      padding-bottom: 30px;
      .discover_title {
        p {
          font-size: 40px;
        }
      }

      .flex_img {
        margin-top: 45px;
        display: flex;
        justify-content: space-between;
        .img_box1 {
          .box1 {
            position: relative;
            border-radius: 30px;
            width: 405px;
            height: 306px;
            overflow: hidden;
            .imgbox {
              :hover {
                transform: scale(1.1, 1.1);
              }

              img {
                border-radius: 30px;
                transition: all 0.5s;
              }
            }

            .text {
              text-align: left;
              position: absolute;
              bottom: 30px;
              left: 20px;

              :first-child {
                font-size: 25px;
              }

              p {
                font-size: 16px;
              }
            }
          }
          .box2 {
            margin-top: 40px;
            background-color: #fff;
            border-radius: 30px;
            width: 405px;
            height: 405px;

            .imgbox {
              border-radius: 30px 30px 0 0;
              overflow: hidden;
              width: 100%;
              height: 280px;

              :hover {
                transform: scale(1.1, 1.1);
              }

              img {
                border-radius: 30px;
                transition: all 0.5s;
                border-radius: 30px 30px 0 0;
              }
            }

            .text {
              text-align: left;
              margin-left: 45px;
              // margin-top: 10px;

              :first-child {
                font-size: 25px;
              }
              p {
                font-size: 16px;
              }
            }
          }
        }

        .img_box2 {
          height: 621px;
          border-radius: 30px;
          overflow: hidden;
          background-color: #fff;
          .imgbox {
            width: 405px;
            height: 465px;
            overflow: hidden;

            :hover {
              transform: scale(1.1, 1.1);
            }

            img {
              border-radius: 30px;
              transition: all 0.5s;
              border-radius: 30px 30px 0 0;
            }
          }

          .text {
            margin-top: 40px;
            text-align: center;
            :first-child {
              font-size: 30px;
            }
            p {
              font-size: 20px;
            }
          }
        }

        .img_box3 {
          .box1 {
            // margin-top: 40px;
            background-color: #fff;
            border-radius: 30px;
            width: 405px;
            height: 460px;

            .imgbox {
              border-radius: 30px 30px 0 0;
              overflow: hidden;
              width: 100%;
              height: 306px;

              :hover {
                transform: scale(1.1, 1.1);
              }

              img {
                transition: all 0.5s;
                border-radius: 30px 30px 0 0;
              }
            }

            .text {
              margin-top: 40px;

              :first-child {
                font-size: 25px;
              }
              p {
                font-size: 16px;
              }
            }
          }

          .box2 {
            margin-top: 40px;
            position: relative;
            border-radius: 30px;
            width: 405px;
            height: 306px;

            .imgbox {
              border-radius: 30px;
              overflow: hidden;
              :hover {
                transform: scale(1.1, 1.1);
              }
            }

            img {
              transition: all 0.5s;
              border-radius: 30px;
            }

            .text {
              text-align: left;
              position: absolute;
              bottom: 30px;
              left: 45px;
              color: #fff;

              :first-child {
                font-size: 25px;
              }

              p {
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }
}
</style>